<template>
  <div class="mui-content teamwrap recordBox" id="content">
    <header class="mui-bar mui-bar-nav bgRed bg_bar noshadow">
      <h1 class="mui-title">团队</h1>
    </header>
    <div class="sortwrap">
      <div class="sortbox">
        <div class="wrap" id="tree_chart_container">
          <div class="one active level-one"></div>
          <div class="line_zs"><span class="line2"></span></div>
          <div class="one active level-two"></div>
          <div class="line_zs"><span class="line2"></span></div>
          <div class="one active level-three"></div>
          <div class="line_zs">
            <span class="line1"></span><span class="line2"></span
            ><span class="line3"></span>
          </div>
          <div class="line_two level-four">
            <div class="two"></div>
            <div class="two"></div>
            <div class="two"></div>
          </div>
          <div class="line_zsbox">
            <div class="line_zs">
              <span class="line1"></span> <span class="line2"></span>
              <span class="line3"></span>
            </div>
            <div class="line_zs">
              <span class="line1"></span> <span class="line2"></span>
              <span class="line3"></span>
            </div>
            <div class="line_zs">
              <span class="line1"></span> <span class="line2"></span>
              <span class="line3"></span>
            </div>
          </div>
          <div class="line_other level-next">
            <div class="other">A1</div>
            <div class="other">A2</div>
            <div class="other">A3</div>
            <div class="other">A4</div>
            <div class="other">A5</div>
            <div class="other">A6</div>
            <div class="other">A7</div>
            <div class="other">A8</div>
            <div class="other">A9</div>
          </div>
          <div class="line_other level-next other-next-container">
            <div class="other other-next">1</div>
            <div class="other other-next">4</div>
            <div class="other other-next">7</div>
            <div class="other other-next">2</div>
            <div class="other other-next">5</div>
            <div class="other other-next">8</div>
            <div class="other other-next">3</div>
            <div class="other other-next">6</div>
            <div class="other other-next">9</div>
          </div>
          <div class="line_other level-next other-next-container">
            <div class="other other-next">10</div>
            <div class="other other-next">13</div>
            <div class="other other-next">16</div>
            <div class="other other-next">11</div>
            <div class="other other-next">14</div>
            <div class="other other-next">17</div>
            <div class="other other-next">12</div>
            <div class="other other-next">15</div>
            <div class="other other-next">18</div>
          </div>
          <div class="line_other level-next other-next-container">
            <div class="other other-next">19</div>
            <div class="other other-next">22</div>
            <div class="other other-next">25</div>
            <div class="other other-next">20</div>
            <div class="other other-next">23</div>
            <div class="other other-next">26</div>
            <div class="other other-next">21</div>
            <div class="other other-next">24</div>
            <div class="other other-next">27</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mui-segmented-control">
      <a
        style="font-size: 1em"
        class="mui-control-item mui-active"
        href="#item1"
      >
        团队成员
      </a>
    </div>
    <div id="item1" class="mui-control-content mui-active mescroll">
      <ul class="teamList" id="dataList"></ul>
    </div>
    <div id="item2" class="mui-control-content mescroll">
      <ul class="teamList teamList1" id="dataList1">
        <li>
          <div class="flex">
            <img src="phoneContent/img/headImg.png" />
            <div class="fr">
              <p class="t_name"></p>
              <p class="t_id">ID：dong3889</p>
            </div>
          </div>
          <div class="fr fr_fr">
            <p class="t_name">+287</p>
            <p class="t_id">2020-12-28 12:30:30</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  getTeamOne,
  getTeamTwo,
  getTeamThree,
  getTreeData,
  getTeamIds,
} from "../apis";
export default {
  data() {
    return {
      user: JSON.parse(localStorage.getItem("userInfo") || "{}"),
      maxPnum: "",
      id: "",
    };
  },
  onLoad() {
    const { user } = this;
    getTeamIds(user.id)
      .then((res) => {
        const { nummber, id } = res.data;
        this.maxPnum = nummber;
        this.id = id;
        return;
      })
      .then(() => {
        const getTreeDataParams = {
          id: this.id,
          userId: this.user.id,
        };
        return getTreeData(getTreeDataParams);
      })
      .then(this.toRenderTreeNode)
      .then(() => {
        const getTeamDataList = [
          new Promise((resolve) => resolve(getTeamOne(user.id))),
          new Promise((resolve) => resolve(getTeamTwo(user.id))),
          new Promise((resolve) => resolve(getTeamThree(user.id))),
        ];
        return Promise.allSettled(getTeamDataList);
      })
      .then((res) => {
        const teamListData = [];
        res.forEach((i) => {
          const { status, value } = i;
          if (status !== "fulfilled") return console.log("数据获取失败");
          teamListData.push(value);
        });
        return teamListData;
      })
      .then(this.toRenderTeamList)
      .catch((err) => console.log(err));
    // Promise.allSettled(getTeamDataList)
  },
  methods: {
    toRenderTreeNode(resData) {
      const treeContainer = this.$("#tree_chart_container");
      let { code, data } = resData;
      // if (!data) data = mockData
      if (!data) {
        treeContainer.show();
        treeContainer.children().not(".other-next-container").hide();
        treeContainer
          .children(".other-next-container")
          .eq(0)
          .addClass("not-top-line");
        return;
      }
      if (code === 200 && data) {
        // treeContainer.orgchart({
        // 	data: data,
        // 	nodeContent: 'name',
        // 	zoom: true,
        // 	zoominLimit: 2,
        // 	zoomoutLimit: 0.7,
        // 	visibleLevel: 3,
        // })
        // treeContainer.scrollLeft(110)
        treeContainer.show();
        const namesObj = this.getTreeNameData(data);
        const {
          levelOneName,
          levelTwoName,
          levelThreeNames,
          levelFourNames,
        } = namesObj;
        this.$(".level-one").html(levelOneName);
        this.$(".level-two").html(levelTwoName);
        this.$(".level-three").html(levelThreeNames);
        const levelFourDomList = this.$(".level-four").children();
        for (let i = 0; i < levelFourDomList.length; i++) {
          levelFourDomList.eq(i).html(levelFourNames[i]);
        }
      }
    },

    getTreeNameData(data) {
      const levelTwoObj = data.children[0];
      const levelThreeObj = levelTwoObj.children[0];
      const levelFourObjs =
        levelThreeObj.children && Array.isArray(levelThreeObj.children)
          ? levelThreeObj.children
          : [];

      // 第一层和第二层只有一个节点
      const levelOneName = data.name;
      const levelTwoName = levelTwoObj.name;
      const levelThreeNames = levelThreeObj.name;
      const levelFourNames = levelFourObjs.map((i) => i.name);

      return {
        levelOneName,
        levelTwoName,
        levelThreeNames,
        levelFourNames,
      };
    },

    toRenderTeamList(list) {
      const allPnum = [];
      const teamListContainer = this.$("#dataList");
      const allTeamListNode = list
        .map((i) => {
          const { code, data } = i;
          const teamList = data
            .map((j, jIndex) => {
              const { id, pnum, name } = j;
              allPnum.push(pnum);
              const isCurrentUser =
                id ===
                JSON.parse(localStorage.getItem("userInfo") || { id: null }).id;
              isCurrentUser && this.showCurrentUserAtTreeChart(pnum);
              const teamListTemplate = `
											<li class="this.${isCurrentUser ? "is-current-user" : ""}">
												<img src="phoneContent/img/headImg.png"/>
												<div class="fr">
													<p class="t_name">this.${name}</p>
													<p class="t_id">ID：this.${id}</p>
												</div>
												<div class="tjpos">所占点位：this.${pnum}</div>
											</li>
											`;
              return teamListTemplate;
            })
            .join("");
          return `<div class="team-list-div">this.${teamList}</div>`;
        })
        .join("");
      this.setLastShowNode(allPnum.reduce((a, b) => (a > b ? a : b)));
      teamListContainer.append(allTeamListNode);
    },

    showCurrentUserAtTreeChart(pnum) {
      const otherNode = this.$(".other");
      for (let i = 0; i < otherNode.length; i++) {
        if (String(pnum) === otherNode.eq(i).text()) {
          otherNode.eq(i).addClass("active");
        }
      }
    },

    setLastShowNode(pnum) {
      typeof pnum === "string" && (pnum = Number(pnum));
      const otherNode = this.$(".other-next");
      for (let i = 0; i < otherNode.length; i++) {
        const nodeVal = Number(otherNode.eq(i).text());
        if (nodeVal > pnum) {
          // otherNode.eq(i).addClass('not-show')
          otherNode.eq(i).html("");
        }
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.memberInfo_box .mbInfo li span {
  padding: 0 5px;
}
#content {
  height: 100%;
  overflow-y: auto;
}
.teamwrap .mescroll {
  padding-right: 10px;
  height: calc(100vh - 388px) !important;
  background: #211d1e;
}
.teamwrap .mui-segmented-control {
  background: #211d1e;
}
#teamInfo {
  height: 100vh;
}
.tree-row {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 10px 0 30px;
}

.one-between {
  justify-content: space-between;
}

.sortbox .wrap {
  /* transform: scale(0.8); */
  overflow-x: auto;
}

.name-border-node {
  border: 1px solid #c69e62;
  border-radius: 8px;
  padding: 4px;
}

.wrap div.title {
  display: none;
}

#tree_chart_container {
  /* background-color: #fff; */
  /* height: 220px; */
  position: relative;
  overflow: auto;
  text-align: center;
  display: none;
}
#tree_chart_container .orgchart {
  background-image: none;
}
#tree_chart_container .orgchart .hierarchy::before {
  border-color: #c99f5d;
  background-color: #c99f5d;
}

#tree_chart_container .orgchart .hierarchy::after {
  border-color: #c99f5d;
  background-color: #c99f5d;
}

#tree_chart_container .orgchart .node::before {
  border-color: #c99f5d;
  background-color: #c99f5d;
}

#tree_chart_container .orgchart .node::after {
  display: none;
}

#tree_chart_container div.content {
  display: inline-block;
  border-radius: 5px;
  text-align: center;
  /* color: #c69e62; */
  color: #32312e;
  border: 1px solid #c99f5d;
  background: #c99f5d;
  padding: 0 20px;
  font-size: 28px;
  line-height: 1;
  font-size: 12px;
  padding: 4px;
  position: relative;
  margin: 0 4px;
}

#tree_chart_container tr:not(.lines) td {
  display: flex;
  justify-content: space-around;
}

/* #tree_chart_container > .orgchart > .nodes > .hierarchy > .node {
	  margin: 0 auto;
	} */

#tree_chart_container tr.lines td {
  display: table-cell;
}

.tree-row .on-class-1::before {
  content: "";
  width: 1px;
  height: 70px;
  display: block;
  position: absolute;
  top: -56px;
  left: 105%;
  margin: 0 auto;
  transform: rotate(68deg);
  background-color: #c69e62;
}

.tree-row .on-class-2::before {
  content: "";
  width: 1px;
  height: 25px;
  display: block;
  position: absolute;
  top: -35px;
  left: 50%;
  margin: 0 auto;
  transform: rotate(0);
  background-color: #c69e62;
}

.tree-row .on-class-3::before {
  content: "";
  width: 1px;
  height: 70px;
  display: block;
  position: absolute;
  top: -56px;
  right: 105%;
  transform: translateX(50%);
  margin: 0 auto;
  transform: rotate(-68deg);
  background-color: #c69e62;
}

#dataList {
  display: flex;
  overflow-x: auto;
}

#dataList .team-list-div {
  height: auto;
  padding: 20px;
  margin: 0 10px;
  border: 1px solid #c69e62;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
}

/* #dataList .is-current-user .fr p {
	  color: red;
	} */
#dataList .is-current-user {
  border: 1px solid red;
  border-radius: 4px;
}
#dataList .is-current-user > img {
  border: 1px solid red;
}
</style>
